<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Carousel Demo Page</title>
  <!-- Load local jQuery, removing access to $ (use jQuery, not $). -->
  <script src="../../libs/jquery/jquery.js"></script>
  <link rel="stylesheet" href="../../src/responsive-carousel.css" media="screen">
 <link rel="stylesheet" href="../assets/demostyles.css">
  <!-- Load local lib and tests. -->
  <script src="../../src/responsive-carousel.js"></script>
  <script src="../../src/responsive-carousel.autoinit.js"></script>
  <script src="../../src/globalenhance.js"></script>
</head>
<body>

	<p>This demo simply adds some styles to hide the next and previous link text accessibly and replace them with a background image. Explaination below.</p>
	<div class="carousel arrows">
	    <div>
	        <img src="../assets/large.jpg">
	    </div>
	    <div>
	        <img src="../assets/monks.jpg">
	    </div>
	    <div>
	        <img src="../assets/monkey.jpg">
	    </div>
		
	</div>

	<p>The following styles are added via a <code>arrows</code> class on the carousel container element.</p>
	
	<pre><code>
/* styled arrows */
.arrows .carousel-nav {
  bottom: auto;
  top: 50%;
}
.arrows .carousel-nav a {
  text-indent: -9999px;
  width: 2em;
  height: 2em;
  background: #fff;
  opacity: .5;
  overflow: hidden;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 100%;
}
.arrows .carousel-nav a:hover,
.arrows .carousel-nav a:focus {
  opacity: 1;
}
.arrows .carousel-nav a.next {
  background-image: url(arrow-right.png);
  right: 1em;
}
.arrows .carousel-nav a.prev {
  background-image: url(arrow-left.png);
  left: 1em;
}
</code></pre>



</body>
</html>
